<template>
    <div>
        <div>
            <nav-bar title="智慧南职" :showBack="false"/>
        </div>
        <div class="img_div">
            <img src="../img/school.png" style="height:2rem;width:2rem;">
        </div>
        <div class="input_div">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">账号：</span>
                    <yd-input slot="right" required v-model="user" placeholder="请输入用户名"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">密码：</span>
                    <yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="button_div">
            <yd-button @click.native="login()" size="large" bgcolor="rgb(52, 169, 214)" color="#fff">登录</yd-button>
        </div>
        <div class="a_div">
            <span style="margin-right:.8rem;text-decoration:underline;">
                <a href="#/registerFirst" class="a_font">注册账号</a>
            </span>
            <span style="text-decoration:underline;">
                <a href="" class="a_font">忘记密码</a>
            </span>
        </div>
    </div>
</template>
<script>
import NavBar from '../components/navbar/NavBar.vue'
export default {
    name: 'Login',
    components: {
        NavBar
    },
    data () {
        return {
            user: '',       //  账号
            password: ''    //  密码
        }
    },
    methods: {
        // 点击登录路由跳转
        login () {
            this.$router.push('/home')
        }
    }
}
</script>
<style scoped>
.img_div{
    text-align: center;
    margin-top: 1rem;
}
.input_div{
    margin-top: 1rem;
}
.button_div{
    margin-top: .6rem;
}
.a_font{
    color:rgb(37, 141, 177);
    font-size: .3rem
}
.a_div{
    margin-top: .8rem;
    text-align: center;
}
</style>
